<template>
  <div style="display: flex;flex-direction: column;">
    <div>
      <el-switch
          v-model="danmuBtn"
          active-text="显示弹幕"
          class="danmuBtn">
      </el-switch>
    </div>

    <div v-show="danmuBtn" style="padding-bottom: 10px">
      <vue-baberrage
          :isShow="barrageIsShow"
          :barrageList="barrageList"
          :maxWordCount="maxWordCount"
          :throttleGap="throttleGap"
          :loop="barrageLoop"
          :boxHeight="boxHeight"
          :messageHeight="messageHeight"
          style="box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);border-radius: 4px;width:1150px;height:120px;">
      </vue-baberrage>

      <el-button class="sendBtn" icon="el-icon-chat-dot-round" type="primary" @click="dialogFormVisible = true">发送弹幕</el-button>
    </div>

    <div style="display: flex;flex-direction: column;align-items: center">
      <h2></h2>
      <el-image
          style="width: 180px; height: 180px"
          :src="require('@/assets/manster.jpg')"
      ></el-image>
      <p>
        了解更多情况，扫描加我好友！
      </p>
    </div>

    <el-dialog title="发送弹幕" width="30%" :visible.sync="dialogFormVisible">
      <el-form :model="danmu" ref="danmuForm" :rules="rules">
        <el-form-item prop="msg" label="弹幕内容" label-width="120">
          <el-input v-model="danmu.msg" placeholder="请输入弹幕内容">
            <template slot="prepend"><el-avatar :size="30" :src="danmu.avatar"></el-avatar></template>
          </el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="addToList('danmuForm')">发 送</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { MESSAGE_TYPE } from 'vue-baberrage'
export default {
  name: 'Index',
  data () {
    return {
      danmuBtn: true, //显示弹幕按钮
      dialogFormVisible: false, //发送弹幕对话框
      barrageIsShow: true,//是否展示弹幕
      messageHeight: 3, //弹幕高度
      boxHeight: 150, //弹幕板高度
      barrageLoop: true,//是否循环播放
      maxWordCount: 3,  //最大长度
      throttleGap: 5000,//消息间隔
      barrageList: [],        //弹幕列表，格式为数组
      currentId: 0,
      danmu: {
        id: this.currentId++,           //弹幕ID
        avatar: "https://picsum.photos/id/" + Math.round(Math.random()*100) + "/200",               //头像
        msg: '',                     //弹幕消息
        time: parseInt(Math.random()*10+5),                   //屏幕展示时间
        type: MESSAGE_TYPE.NORMAL      //类型
      },
      rules: {
        msg: [
          { required: true, message: '请输入弹幕内容', trigger: 'blur' },
          { min: 1, max: 15, message: '长度在 1 到 15 个字符', trigger: 'blur' }
        ]
      }
    }
  },
  methods:{
    //添加弹幕
    addToList(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          //关闭弹窗
          this.dialogFormVisible = false
          //添加弹幕
          this.barrageList.push(this.danmu);
          //重置弹幕
          this.danmu = {
            id: this.currentId++,
            avatar: "https://picsum.photos/id/" + Math.round(Math.random()*100) + "/200",
            msg: '',
            time: parseInt(Math.random()*10+5),
            type: MESSAGE_TYPE.NORMAL
          }
          //发送弹幕成功
          this.$message({
            message: '恭喜你，发送弹幕成功',
            type: 'success'
          });
        } else {
          return false;
        }
      });
    }
  }
}
</script>
<style>
.danmuBtn {
  float: right;
  margin-right: 10px !important;
  position: absolute;
  top: 20px;
}
.sendBtn {
  float: right;
  margin-top: 40px !important;
  margin-right: 5px !important;
}
</style>
